import React from 'react';
import {
  Space, Table, Tag, Badge,
} from 'antd';
import { FileSearchOutlined, NodeIndexOutlined, CalendarOutlined } from '@ant-design/icons';
import './list.css';

const statusMap = {
  success: '部署成功',
  error: '部署失败',
  processing: '正在部署',
};

export default function () {
  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '部署任务名称',
      dataIndex: 'name',
      key: 'name',
      render: (text) => <Badge count="NEW" size="small" offset={[23, 0]}><a>{text}</a></Badge>,
    },
    {
      title: '部署版本',
      dataIndex: 'version',
      key: 'version',
    },
    {
      title: '任务状态',
      key: 'status',
      dataIndex: 'status',
      render: (_, { status }) => (
        <Tag color={status} key={status}>
          {statusMap[status] || status}
        </Tag>
      ),
    },
    {
      title: '任务发布者',
      dataIndex: 'create',
      key: 'create',
    },
    {
      title: '任务发布时间',
      key: 'createtime',
      dataIndex: 'createtime',
      render: (_, { createtime }) => new Date(createtime).toLocaleString(),
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => { window.turnto('/applications/server/serverInfo'); }}>
            <FileSearchOutlined />
            {' '}
            详情
          </a>
          <a>
            <NodeIndexOutlined />
            {' '}
            执行部署
          </a>
          <a>
            <CalendarOutlined />
            {' '}
            执行记录
          </a>
        </Space>
      ),
    },
  ];
  const data = [
    {
      id: '1',
      name: 'Action video',
      version: 'v10.2.3',
      status: 'success',
      create: 'zzc',
      createtime: 123123132345611,
    },
    {
      id: 2,
      name: 'monitor dio',
      version: 'v10.2.3',
      status: 'error',
      create: 'cca',
      createtime: 3333333333321,
    },
    {
      id: 3,
      name: 'voice ana',
      version: 'v10.2.3',
      status: 'processing',
      create: 'dsd',
      createtime: 1923132313223,
    },

  ];
  return (
    <div className="content">
      <Table columns={columns} dataSource={data} />
    </div>
  );
}
